<template>
    <div>
        <h2>订单管理</h2>
        <div id="search-box">
            <div>
                <!-- 订单编号：<input
                    size="mini"
                    v-model="combineSearchData.inputOrdersId"
                ></input>
                租客名：<input size="mini" v-model="combineSearchData.inputTenantsName"></input>
                车位编号：<input
                    size="mini"
                    v-model="combineSearchData.inputParkingsNum"
                ></input> -->
                <span>检索条件：</span>
                <select v-model="mySearchData.searchBy" placeholder="请选择">
                    <option value="_id">订单编号（完整）</option>
                    <option value="tenantsName">租客姓名（模糊）</option>
                    <option value="parkingsAddress">车位地址（模糊）</option>
                    <option value="startTime">下单日期</option>
                </select>
                <input type="" name="" v-model="mySearchData.searchValue" />
            </div>

            <div class="block">
                <div>
                    <el-date-picker
                        v-model="mySearchData.date"
                        type="date"
                        placeholder="选择日期"
                    >
                    </el-date-picker>

                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        @click="mySearch()"
                    >
                        查询
                    </el-button>
                    <div style="float: right">
                        <span>分类查看：</span>
                        <select name="" id="" v-model="showByState">
                            <option value="0">全部订单</option>
                            <option value="1">未支付</option>
                            <option value="2">已支付</option>
                            <option value="3">已取消</option>
                            <option value="4">已完成</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <el-table
            :data="ordersData"
            style="width: 100%; margin-top: 50px; text-align: center"
            border
        >
            <el-table-column label="订单编号" prop="_id"> </el-table-column>
            <el-table-column label="创建时间" prop="startTime">
            </el-table-column>
            <el-table-column label="订单状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 1" style="color: red"
                        >未支付</span
                    >
                    <span v-else-if="scope.row.state == 2" style="color: green"
                        >已支付</span
                    >
                    <span v-else-if="scope.row.state == 3" style="color: #666"
                        >已取消</span
                    >
                    <span
                        v-else-if="scope.row.state == 4"
                        style="color: steelblue"
                        >已完成</span
                    >
                </template>
            </el-table-column>

            <el-table-column label="完成时间" prop="endTime"> </el-table-column>
            <!-- <template> 
                <el-table-column label="租客" prop="tenantsId.name" v-if=""> 
            </template> -->
            <el-table-column label="租客" prop="tenantsId.name">
            </el-table-column>
            <el-table-column label="预定车位地址" prop="parkingsId.address">
            </el-table-column>

            <el-table-column align="right">
                <template slot-scope="scope">
                    <!-- 订单详情 -->
                    <el-button type="text" @click="getOrdersDetail(scope.row)"
                        >查看订单详情</el-button
                    >
                    <!-- 修改订单弹窗 -->
                    <el-button type="text" @click="getModifyOrders(scope.row)">
                        修改订单
                    </el-button>
                    <!-- 删除按钮 -->
                    <el-button
                        size="mini"
                        type="danger"
                        @click="myDeleteOrders(scope.row._id)"
                        >删除订单</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2, 3, 4, 5]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 嵌套表单 -->
        <div>
            <el-dialog title="修改订单" :visible.sync="dialogFormVisibleOne">
                <el-form :model="formOne">
                    <el-form-item
                        label="订单状态"
                        :label-width="formLabelWidth"
                    >
                        <el-select v-model="formOne.state">
                            <el-option label="未支付" value="1"></el-option>
                            <el-option label="已支付" value="2"></el-option>
                            <el-option label="已取消" value="3"></el-option>
                            <el-option label="已完成" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleOne = false"
                        >取 消</el-button
                    >
                    <el-button
                        type="primary"
                        plain
                        @click="
                            dialogFormVisibleOne = false;
                            successModify();
                            myModifyOrders(formOne);
                        "
                        >确 定</el-button
                    >
                </div>
            </el-dialog>
        </div>
        <div>
            <!-- 嵌套表单 查看订单详情 -->
            <el-dialog
                title="订单详情"
                :visible.sync="dialogFormVisibleTwo"
                @close="showPhone = false"
            >
                <el-form :model="formTwo">
                    用户姓名：<span>{{ formTwo.tenantsId.name }}</span>
                    <template>
                        <button
                            v-if="!showPhone"
                            @click="showPhone = true"
                            class="button"
                        >
                            联系用户
                        </button>
                        <span
                            v-if="showPhone"
                            style="color: steelblue; font-weight: bold"
                        >
                            {{ formTwo.tenantsId.phone }}
                        </span>
                    </template>
                    <br />
                    预租时间：<span>{{ formTwo.parkingsId.cycle }}小时</span>
                    <br />
                    单价：<span>{{ formTwo.parkingsId.price }}元</span>
                    <br />
                    金额：<span
                        >{{
                            formTwo.parkingsId.cycle * formTwo.parkingsId.price
                        }}元</span
                    >
                    <br />
                    出租方:<span>{{
                        formTwo.parkingsId.lessorsId.account
                    }}</span>
                    <br />
                    联系出租方：<span
                        style="color: steelblue; font-weight: bold"
                        >{{ formTwo.parkingsId.lessorsId.telephone }}</span
                    >
                    <br />
                    用户评价：
                    <span>{{ formTwo.evaluateContent }}</span>
                    <br />
                    评价等级：<span>{{ formTwo.evaluateStar }}</span>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapState,
    mapActions,
    mapGetters,
    mapMutations,
} = createNamespacedHelpers("orders");
export default {
    mounted() {
        this.getOrders();
    },

    data() {
        return {
            mySearchData: {
                searchBy: "tenantsName",
                searchValue: "",
                date: "",
            },
            showByState: 0,
            showPhone: false,
            //________elementUI
            formOne: {},
            formTwo: {
                tenantsId: {},
                parkingsId: { lessorsId: {} }, //避免初始渲染报错
            },
            formLabelWidth: "120px",
            dialogFormVisibleOne: false,
            dialogFormVisibleTwo: false,
        };
    },
    computed: {
        ...mapState(["ordersData", "searchData", "totalPages", "total"]),
        pageSize: {
            get() {
                return this.searchData.pageSize;
            },
            set(val) {
                this.changePageSize(val);
                console.log("pageSize", val);
            },
        },
        currentPage() {
            return this.searchData.currentPage;
        },
    },
    watch: {
        currentPage() {
            this.getOrders();
        },
        pageSize() {
            this.getOrders();
        },
        showByState(val) {
            //按state分类查看
            this.changeSearchData({ searchBy: "state", searchValue: val });
            this.getOrders();
        },
    },
    methods: {
        ...mapActions([
            "getOrders",
            "deleteOrders",
            "searchOrders",
            "modifyOrders",
        ]),
        ...mapMutations([
            "updateOrdersData",
            "changeSearchData",
            "changePageSize",
            "changeCurrentPage",
        ]),
        handleSizeChange(val) {
            this.changePageSize(val);
        },
        handleCurrentChange(val) {
            this.changeCurrentPage(val);
        },
        successModify() {
            this.$notify({
                title: "成功",
                message: "订单状态修改成功",
                type: "success",
            });
        },
        //软删除订单
        async myDeleteOrders(id) {
            const msg = await this.deleteOrders(id);
            if (msg.data.status) {
                this.getOrders();
            }
            alert(msg.data.message);
        },
        // 修改订单
        getModifyOrders(order) {
            //order=scope.row,form=order
            console.log(order);
            this.formOne = { ...order };
            this.dialogFormVisibleOne = true;
        },
        // 确认修改
        async myModifyOrders(formOne) {
            console.log("要修改的订单", form);
            const msg = await this.modifyOrders(formOne);
            if (msg.data.status) {
                this.getOrders();
            }
            // alert(msg.data.message);
        },
        //查看订单信息
        getOrdersDetail(order) {
            this.formTwo = { ...order };
            console.log("formTwo", this.formTwo);
            this.dialogFormVisibleTwo = true;
        },

        async mySearch() {
            this.changeSearchData(this.mySearchData);
            this.getOrders();
        },
    },
};
</script>

<style lang='scss'>
.block {
    margin-top: 10px;
}
input,
select {
    width: 120px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.button {
    width: 60px;
    height: 30px;
    background-color: yellowgreen;
    border: 1px solid #eee;
    color: #eee;
    border-radius: 6px;
}
</style>